<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="../../javascript/react.development.js"></script>
<script src="../../javascript/react-dom.development.js"></script>
<script src="../../javascript/babel.min.js"></script>
<script type="text/babel">
    /*
    *
    * setState这个方法在调用的时候是同步的，但是引起React的状态更新是异步的 【React状态更新是异步的】
    * setState第一个参数可以是一个对象，或者是一个函数，而第二个参数是一个回调函数
    *
    *setState第二个参数的作用：
    *   因为setState是一个异步的过程，所以说执行完setState之后不能立刻更改state里面的值。
    *   如果需要对state数据更改监听，setState提供第二个参数，就是用来监听state里面数据的更改，当数据更改完成，调用回调函数，用于可以实时的获取到更新之后的数据
    *
    *为什么setState设计为异步的：
    *   setState设计为异步，可以显著的提升性能
    *   如果每次调用setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的，最好的办法应该是获取到多个更新，之后进行批量更新
    *
    *调用setState的时候，发生了什么事：
    *   1.将传递给 setState 的对象合并到组件的当前状态，触发所谓的调和过程（Reconciliation）
    *   2.然后生成新的DOM树并和旧的DOM树使用Diff算法对比
    *   3.根据对比差异对界面进行最小化重渲染
    * */
    class App extends React.Component {
        constructor(props, context) {
            super(props, context)
            this.state = {count: 1}
        }

        render() {
            return (
                <div className="app">
                    <button onClick={() => {
                        this.addCount()
                    }}>点击{this.state.count}</button>
                </div>
            );
        }

        addCount() {
            /*
            setState函数的第一个参数为:对象
            this.setState({count: this.state.count += 1}, () => {
                console.log(this.state.count) // setState函数的第二个参数里面能拿到更新后的值
            })
            */

            // setState函数的第一个参数为:函数
            this.setState(() => {
                return {
                    count: this.state.count += 1
                }
            }, () => {
                console.log(this.state.count)
            })
        }
    }

    ReactDOM.render(<App></App>, document.querySelector("#root"))
</script>
</body>
</html>